<template>
	<view>
		<!-- 顶部头图 -->
		<view class="topimg">
			<image
				src="https://p0.meituan.net/scarlett/b8a592076265994b16bf794e7ab92436550667.png%40750w_500h_1e_1c_1l%7Cwatermark%3D0"
				alt="" mode="aspectFill" />



		</view>
		<!-- 主体信息盒子 -->
		<view class="bigbox">
			<!-- 用户头像和名字 -->
			<view class="userbox">
				<view class="userimg" @click="uslogin()">

				</view>
				<view class="username">
					<view class="name">
						{{userinfo.name}}
					</view>
					<view class="phone" v-if="userinfo.phone">
						{{userinfo.phone}}
					</view>
				</view>


			</view>
			<!-- 会员板块 -->
			<view class="vipmini" v-if="!userinfo.phone">

				<view class="text">
					<!-- <view class="icon"> -->
					<image src="https://p1.meituan.net/travelcube/7ef30faf98c6e29cce3cc10498f2a6337347.png"
						mode="widthFix" style="width: 25rpx;margin-right: 20rpx;"></image>
					<!-- </view> -->
					注册会员<span style="margin: 0 6rpx;color: #999;">|</span>尊享更多专属特权
				</view>

				<view class="logbtn" @click="uslogin()">
					注册/登录
				</view>
			</view>
			<view class="vipbig" v-else>

				<view class="viptop">
					<view class="text">
						<view class="title">
							SipSite会员卡&nbsp;·&nbsp;幸福会员
						</view>
						<view class="cardcode">
							113345667865
						</view>
					</view>

					<uni-icons type="scan" size="28" color="white" @click="gotoVip()"></uni-icons>

				</view>
				<view class="vipbottom">
					<view class="item">
						<view class="num">
							0
						</view>
						<view class="text">
							优惠券<uni-icons type="right" size="26rpx" color="white"></uni-icons>
						</view>
					</view>
					<view class="item">
						<view class="num">
							0
						</view>
						<view class="text">
							余额<uni-icons type="right" size="26rpx" color="white"></uni-icons>
						</view>
					</view>
					<view class="item">
						<view class="num">
							0
						</view>
						<view class="text">
							积分<uni-icons type="right" size="26rpx" color="white"></uni-icons>
						</view>
					</view>
				</view>

			</view>

			<!-- 功能板块 -->
			<view class="function-box">
				<!-- 订单 -->
				<view class="function-order function-black">
					<image src="/static/order.svg" mode="heightFix" class="function-icon"></image>
					<view class="function-text">
						订单
					</view>
				</view>

				<!-- 隐私设置 -->
				<view class="function-privacySettings function-black">
					<image src="/static/privacySettings.svg" mode="heightFix" class="function-icon"></image>
					<view class="function-text">
						隐私设置
					</view>

				</view>
			</view>




		</view>





		<!-- 登录弹出层 -->
		<uni-popup ref="popup" type="center">
			<view class="pop">
				<view class="title">
					手机号一键登录
				</view>
				<!-- <view class="center">
					<view class="ceTitle">
						手机号：
					</view>
					<input type="text" class="phoneinp" placeholder="请输入手机号码" />
				</view> -->

				<view class="center">
					<view class="ceTitle">
						185 **** 4625
					</view>
					<view class="phoneinp">是您的手机号码吗？</view>
				</view>
				<view class="btn" @click="loginYes">
					一键登录
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: JSON.parse(localStorage.getItem("userinfo")) || {
					name: "亲爱的用户",
					phone: false
				},
			}
		},
		methods: {
			uslogin() {
				this.$refs.popup.open()
			},
			loginYes() {
				this.userinfo = {
					name: '用户4625',
					phone: "185 **** 4625"
				}
				localStorage.setItem("userinfo", JSON.stringify(this.userinfo))
				this.$refs.popup.close()
			},
			gotoVip() {
				uni.navigateTo({
					url: "/pages/user/VipPage"
				})
			}

		}
	}
</script>

<style scoped lang="less">
	@font-face {
		font-family: CustomFont;
		src: url('./iconfont.ttf');
	}

	// body {

	// 	background-color: white;
	// }
	// 主题信息盒子
	.bigbox {
		width: 100vw;
		height: 60vh;
		// background-color: aquamarine;
		background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(245, 245, 245) 25%)
	}

	// 顶部头图样式
	.topimg {
		height: 300rpx;
		width: 100vw;
		// background-color: aquamarine;
		overflow: hidden;

		image {
			width: 100vw;

		}
	}

	// 用户信息
	.userbox {
		padding: 0 20rpx;
		width: 100vw;
		height: 150rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;

		.userimg {
			width: 120rpx;
			height: 120rpx;
			background-color: skyblue;
			margin-right: 40rpx;
			border-radius: 60rpx;
		}

		.username {
			width: 70%;
			height: 100rpx;
			display: flex;
			flex-flow: column;
			justify-content: space-evenly;

			.phone {
				font-size: 25rpx;
				margin-top: 20rpx;
			}

		}
	}

	// 会员板块
	.vipmini {
		font-size: 25rpx;
		width: 85vw;
		height: 80rpx;
		margin: 0 auto;
		background-color: white;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		border-radius: 20rpx;
		justify-content: space-between;

		.text {
			display: flex;
		}

		.logbtn {
			font-size: 22rpx;
			padding: 10rpx 15rpx;
			background-color: rgb(255, 219, 169);
			border-radius: 30rpx;
		}

	}

	.vipbig {
		margin: 0 auto;
		margin-top: 30rpx;
		width: 85vw;
		height: 29vw;
		// background-color: aqua;
		background: url("/static/mypageimg.webp") center center;
		background-size: cover;
		padding: 50rpx 30rpx;
		border-radius: 20rpx;
		color: white;
		display: flex;
		flex-flow: column;
		justify-content: space-between;

		.viptop {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.text {
				.cardcode {
					margin-top: 5rpx;
					font-size: 27rpx;
					color: rgba(255, 255, 255, 0.8);
				}
			}
		}

		.vipbottom {
			display: flex;
			align-items: center;
			justify-content: space-around;

			.item {
				display: flex;
				flex-flow: column;
				align-items: center;

				.num {
					font-size: 35rpx
				}

				.text {
					margin-top: 10rpx;
					font-size: 25rpx;
					color: rgba(255, 255, 255, 0.8);
				}
			}
		}
	}

	// 功能模块
	.function-box {
		width: 85vw;
		height: 22vw;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: flex-start;

		margin: 0 auto;
		margin-top: 30rpx;
		padding: 30rpx;
		border-radius: 20rpx;

		.function-black {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-flow: column;
			// background-color: red;
			width: 25%;
			height: 150rpx;
		}

		.function-icon {

			height: 60rpx;
			margin-bottom: 15rpx;
		}

		.function-text {
			font-size: 22rpx;
			color: #5e5e5e;

		}

		.function-order {}

		.function-privacySettings {}
	}



	// 弹出层样式
	.pop {
		width: 70vw;
		height: 60vw;
		background-color: white;
		border-radius: 30rpx;
		padding: 20rpx;
		box-sizing: border-box;

		display: flex;
		align-items: center;
		flex-flow: column;
		justify-content: space-between;

		.btn {
			width: 90%;
			height: 60rpx;
			background-color: rgb(58, 118, 225);
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
		}

		.center {
			.ceTitle {
				font-size: 50rpx;
				margin-bottom: 25rpx;
			}

			.phoneinp {
				font-size: 25rpx;
				color: #999;
			}

			.phoneinp:focus {
				border-bottom: 1rpx solid #000;
			}

		}

	}
</style>